<template>
  <div class="action-btn-wp">
    <el-popover
        placement="left"
        width="460"
        trigger="click">
      <el-button type="primary" size="small" slot="reference" @click.stop.prevent="handelClick">赔偿详情</el-button>

      <div class="compensate-info-box" v-loading="loading" element-loading-text="查询中">
        <header>
          {{state}}
        </header>
        <div class="body">
          <template v-if="list.length > 0">
            <ul class="compensate-list">
              <li class="header">
                <span class="item">赔偿项</span>
                <span class="amount">金额</span>
              </li>
              <li v-for="(compensate,index) in list" :key="index">
                <span class="item">{{compensate.describe}}</span>
                <span class="amount">￥{{compensate.money | parsePrice}}</span>
              </li>
              <li>
                <span class="item">合计</span>
                <span class="amount">￥{{compensateAmount | parsePrice}}</span>
              </li>
            </ul>
          </template>
          <template v-if="list.length <= 0">
            <div class="no-date">未申请赔偿项目</div>
          </template>
          <div class="image-list">
            <div class="image-wp" v-for="(image,index) in images" :key="index">
              <img class="preview-img" :src="url(image.url)" @click.stop.prevent="$refs['preview'].previewImg(index)">
            </div>

            <!--图片预览-->
            <preview-img ref="preview" :list="images"></preview-img>

          </div>
        </div>

      </div>
    </el-popover>
  </div>
</template>

<script>
  import {getOrderInfoCompensate} from '@/api/order';
  import {osshost} from '@/api/util/fetch';
  import previewImg from '@/components/previewImg';

  export default {
    name: 'actionCompensateInfo',//赔偿详情
    components:{
      'preview-img':previewImg,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'orderNumber'
      },
    },
    data()
    {
      return {
        loading:false,
        state:'',
        list:[],
        compensateAmount:0, //赔偿总金额
        images:[],
      }
    },
    computed:{
      total()
      {
        let t = 0;
        this.list.forEach(item=>{ t += item.money});
        return t;
      }
    },
    methods: {
      handelClick()
      {
        //关闭所有pop，防止窗口重叠
        document.querySelector("#app").click();

        let row = this.scope.row || {};
        let data = {
          id:row[this.scopeId],
        };

        this.loading = true;
        getOrderInfoCompensate(data).then(resp=>{
          let data = resp.data || {};
          this.list = data.compensateItems || [];
          this.state = data.compensateStateStr || '';
          this.compensateAmount = data.compensateAmount || 0;

          this.images = data.image || [];

          this.loading = false;

        }).catch(err=>{

          this.loading = false;

        });
      },
      url(url) //图片地址
      {
        if(url && url !=='undefined')
        {
          return osshost + url + '?x-oss-process=image/resize,w_100';
        }

        return '';
      },

    }
  }
</script>

<style lang="scss" scoped>
  .compensate-info-box{
    padding: 10px;
    > header
    {
      padding: 0 10px;
      color: #999;
    }
    > .body
    {
        padding: 10px 0;
        .compensate-list
        {
          list-style: none;
          padding: 0;
          margin: 0;
          > li
          {
            display: block;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            padding: 0 10px;

            .item
            {
              float: left;
            }

            .amount
            {
              float: right;
            }

            + li
            {
              border-top: 1px solid #f1f1f1;
            }

            &.header
            {
               background: #f1f1f1;
            }
          }
        }
        .no-date
        {
           text-align: center;
           font-size: 14px;
           padding: 30px 0;
        }

      .image-list
      {
         overflow: hidden;
         padding: 20px 10px 10px 10px;

         .image-wp
         {
            width: 70px;
            height: 70px;
            overflow: hidden;
            border: 1px solid #f1f1f1;

            float: left;

            > img
            {
              width: 100%;
              height: 100%;
              border: none;
            }

           + .image-wp
           {
              margin-left: 10px;
           }
         }
      }
    }
  }
</style>